<template>
  <div class="product-sidebar">
    <AutofixScroll :height="height">
      <div v-for="item in tabList" :key="item.value">
        <div
          class="tab-item"
          :class="{current: item.value === currentTab}"
          @click="onClick(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </AutofixScroll>
  </div>
</template>

<script setup>
import {ref, watch, toRefs, onMounted} from 'vue';
import AutofixScroll from '@/components/AutofixScroll/index';

const props = defineProps({
  tabList: {
    type: Array,
    default: () => [],
  },
  height: {
    type: Number,
    default: 0,
  },
});
const {tabList} = toRefs(props);
const currentTab = ref('');
watch(tabList, (val) => {
  if (val.length) {
    currentTab.value = val[0].value;
    emit('change', val[0]);
  }
});
onMounted(() => {
  if (tabList.value.length) {
    currentTab.value = tabList.value[0].value;
    emit('change', tabList.value[0]);
  }
});

const emit = defineEmits(['change']);
const onClick = (data) => {
  currentTab.value = data.value;
  emit('change', data);
};
</script>

<style lang="less" scoped>
.product-sidebar {
  height: 100%;
  .tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 44px;
    font-size: 12px;
    &.current {
      background: #282828;
      color: #fff;
    }
  }
}
</style>
